<template>
	<view class="flex flex-column justify-center" style="height: 80vh;">
		<view v-if="show" style="z-index: 100;" class="position-absolute left-0 top-0 right-0 bottom-0 flex align-center justify-center">
			<view class="text-muted font-sm">
				加载中...
			</view>
		</view>
		<view style="height: 44px;" class=""></view>
		<view class="flex align-center justify-center font-lg text-muted" style="margin-top: 100rpx;margin-bottom:80rpx;">
			欢迎回来
		</view>
		<view class="px-4">
			<input type="text" v-model="form.username" class="uni-input bg-light rounded p-2 mb-4" placeholder="手机号/用户名/邮箱" />
			<input type="password" v-model="form.password" class="uni-input bg-light rounded p-2 mb-4" placeholder="请输入密码" />
			<input v-if="type==='reg'" type="password" v-model="form.repassword" class="uni-input p-2 bg-light rounded mb-4"
			 placeholder="确认密码" />
			<view @click="submit" hover-class="bg-main-hover" class="bg-main text-white flex align-center justify-center font-md py-2 rounded-circle ">
				{{type==='login'?'登录':'注册'}}
			</view>
			<view class="flex align-center justify-center pt-5">
				<view class="text-muted  font-sm" @click="changeType">
					{{type==='login'?'注册账号':'去登陆'}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'login',
				form: {
					username: '',
					password: '',
					repassword: ''
				},
				show: true
			}
		},
		created() {
			let token = uni.getStorageSync('token')
			if (!token) {
				// 用户未登录
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
				return this.show = false
			}
			// 用户已登录
			uni.switchTab({
				url: "../index/index"
			})
		},
		methods: {
			changeType() {
				this.type = this.type === 'login' ? 'reg' : 'login'
			},
			submit() {
				let msg = this.type === 'login' ? '登录' : '注册'
				this.$H.post('/user/' + this.type, this.form).then(res => {
					console.log(res)
					uni.showToast({
						title: msg + '成功',
						icon: 'none'
					});
					if (this.type === 'login') {
						this.$store.dispatch('login', res).then(res => {
							uni.switchTab({
								url: '/pages/my/my'
							})
						})
					} else {
						this.form = {
							username: '',
							password: '',
							repassword: ''
						}
						this.type = 'login'
					}
				})
			}
		}
	}
</script>

<style>

</style>
